<template>
  <div class="login">
    <!-- pc -->
    <div class="box-left" v-if="this.pc">
      <el-carousel height="100vh" indicator-position="none">
        <el-carousel-item>
          <img
            src="../../assets/bg/tj.png"
            alt="生活缴费系统"
            class="carousel_image_type"
          />
        </el-carousel-item>
        <el-carousel-item>
          <img
            src="../../assets/bg/tj1.png"
            alt="生活缴费系统"
            class="carousel_image_type"
          />
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="box-right" v-if="this.pc">
      <div class="loginbox">
        <h2>
          <i class="el-icon-s-marketing"></i> 黑名单系统<br /><i
            style="font-size: 13px"
            >Background Management System</i
          >
        </h2>
        <Vcode :show="isShow" @success="success" @close="close" />
        <br />
        <el-input
          prefix-icon="el-icon-user"
          placeholder="用户账号"
          v-model="loginForm.username"
          clearable
        >
        </el-input>
        <br /><br />
        <el-input
          prefix-icon="el-icon-lock"
          placeholder="用户密码"
          v-model="loginForm.password"
          clearable
          show-password
        >
        </el-input>
        <br /><br /><br />
        <el-button
          class="btn"
          type="primary"
          :disabled="btns"
          @click.native.prevent="handleLogin"
          plain
          >登录</el-button
        >
        <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
        <span style="color: #666">
          科技用心服务每一个用户
          <br />
          Copyright © 2022 All Rights Reserved.
        </span>
      </div>
    </div>
    <!-- mobile -->
    <div class="box-rights" v-if="this.mobile">
      <div class="loginboxs">
        <br /><br /><br />
        <h2 style="color: #fff; font-size: 18px">
          <i class="el-icon-s-marketing"></i> 黑名单系统<br /><i
            style="font-size: 10px"
            >Background Management System</i
          >
        </h2>
        <br /><br />
        <el-input
          prefix-icon="el-icon-user"
          placeholder="用户账号"
          v-model="loginForm.username"
          clearable
        >
        </el-input>
        <br /><br />
        <el-input
          prefix-icon="el-icon-lock"
          placeholder="用户密码"
          v-model="loginForm.password"
          clearable
          show-password
        >
        </el-input>
        <br /><br /><br />
        <el-button
          class="btns"
          @click.native.prevent="handleLogin"
          type="primary"
          >登录</el-button
        >
        <br /><br /><br /><br /><br /><br /><br /><br /><br />
        <span style="color: #fff; font-size: 7px">
          科技用心服务每一个用户
          <br />
          Copyright © 2022 All Rights Reserved.
        </span>
      </div>
    </div>
  </div>
</template>
<script>
import Vcode from "vue-puzzle-vcode";
import debounce from "lodash.debounce";
export default {
  data() {
    return {
      isShow: false, // 验证码模态框是否出现
      btns: false, //按钮是否可点
      msg: "",
      loginForm: {
        username: "510145",
        password: "123",
      },
      screenWidth: "",
      screenHeight: "",
      mobile: false,
      pc: false,
    };
  },
  components: {
    Vcode,
  },
  mounted() {
    this.screenWidth = document.body.clientWidth;
    this.screenHeight = document.body.clientHeight;
    window.onresize = () => {
      return (() => {
        this.screenWidth = document.body.clientWidth;
        this.screenHeight = document.body.clientHeight;
      })();
    };
    let self = this;
    document.onkeydown = function (e) {
      let ev = document.all ? window.event : e;
      if (ev.keyCode === 13) {
        self.handleLogin();
      }
    };
  },
  watch: {
    $route: {
      handler: function (route) {
        this.redirect = route.query && route.query.redirect;
      },
      immediate: true,
    },
    screenWidth: {
      deep: true,
      handler: function (newValue, oldValue) {
        if (newValue >= 1000) {
          this.pc = true;
          this.mobile = false;
          this.msg = "";
        } else {
          this.pc = false;
          this.mobile = true;
          this.msg = "success";
        }
      },
    },
    msg: {
      handler: function (newValue, oldValue) {
        if (newValue == "success") {
          this.btns = false;
          this.handleLogin();
        } else {
        }
      },
    },
  },
  methods: {
    // 用户通过了验证
    success(msg) {
      this.isShow = false; // 通过验证后，需要手动隐藏模态框
      this.msg = "success";
    },
    // 用户点击遮罩层，应该关闭模态框
    close() {
      this.isShow = true;
    },
    // login
    handleLogin: debounce(function () {
      this.handleLogins();
    }, 1000),
    handleLogins() {
      if (this.msg == "success") {
        if (this.loginForm.username && this.loginForm.password) {
          this.loading = true;
          this.$store
            .dispatch("user/login", this.loginForm)
            .then(() => {
              this.$router.push({ path: "/" });
              this.loading = false;
            })
            .catch(() => {
              this.loading = false;
            });
        }
      } else {
        if (this.loginForm.username && this.loginForm.password) {
          this.isShow = true;
          this.msg = "";
          this.btns = true;
        } else {
          this.$message("请输入用户名及密码");
        }
      }
    },
  },
};
</script>

<style scoped>
.box-left {
  width: 60%;
  float: left;
  position: relative;
}

.box-right {
  width: 40%;
  height: 100vh;
  float: right;
  position: relative;
}

.box-rights {
  text-align: center;
  width: 100%;
  height: 100vh;
  background-image: url(../../assets/bg/bgc.png);
  background-repeat: no-repeat;
  background-size: cover;
}

.carousel_image_type {
  width: 100%;
  height: 100%;
}

.loginbox {
  height: 50vh;
  text-align: center;
  width: 50%;
  margin: 0 auto;
}

.loginboxs {
  height: 100vh;
  text-align: center;
  width: 50%;
  margin: 0 auto;
}

.loginbox h2 {
  margin-top: 25vh;
}

.loginboxs h2 {
  margin-top: 10vh;
}

.loginbox h2:hover {
  color: #409eff;
}

.loginboxs h2:hover {
  color: #409eff;
}

.loginbox .btn {
  width: 100%;
}

.loginboxs .btns {
  width: 100%;
}
</style>
<style>
.login {
  margin: 0;
  padding: 0;
}

.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
</style>
